<template>
  <div class="third">
    <div class="carrousel">
      <img src="/static/images/pic0.png" alt="pic0" :class="[active === 0 ? 'in' : active === 1 ? 'out' : '']">
      <img src="/static/images/pic1.png" alt="pic1" :class="[active === 1 ? 'in' : active === 2 ? 'out' : '']">
      <img src="/static/images/pic2.png" alt="pic2" :class="[active === 2 ? 'in' : active === 3 ? 'out' : '']">
      <img src="/static/images/pic3.png" alt="pic3" :class="[active === 3 ? 'in' : active === 4 ? 'out' : '']">
      <img src="/static/images/pic4.png" alt="pic4" :class="[active === 4 ? 'in' : active === 0 ? 'out' : '']">
      <div class="dot">
        <li :class="[active === 0 ? 'active' : '']"></li>
        <li :class="[active === 1 ? 'active' : '']"></li>
        <li :class="[active === 2 ? 'active' : '']"></li>
        <li :class="[active === 3 ? 'active' : '']"></li>
        <li :class="[active === 4 ? 'active' : '']"></li>
      </div>
      <svg @click="goBack" class="icon" aria-hidden="true">
        <use xlink:href="#icon-fanhui"></use>
      </svg>
    </div>
    <p class="title">是什么造就了一位英雄?</p>
    <div class="options">
      <li @click="chose(0)" :class="[option === 0 ? 'active' : '']">超级大国</li>
      <li @click="chose(1)" :class="[option === 1 ? 'active' : '']">一位助手</li>
      <li @click="chose(2)" :class="[option === 2 ? 'active' : '']">彩色紧身裤</li>
      <li @click="chose(3)" :class="[option === 3 ? 'active' : '']">勇气</li>
      <li @click="chose(4)" :class="[option === 4 ? 'active' : '']">帮助他人</li>
    </div>
    <div v-if="showCover" class="top-right">
      <div @click="goNext" class="choose">
        <p>选择支持</p>
        <p>一家公益组织</p>
      </div>
      <span>￥0.05</span>
    </div>
    <div v-if="showCover" class="cover"></div>
  </div>
</template>

<script>
export default {
  name: 'tutorialThird',
  data () {
    return {
      active: 0,
      option: null,
      showCover: false
    }
  },
  created () {
    this.initCarrousel()
  },
  destory () {
    clearInterval(this.interval)
  },
  methods: {
    initCarrousel () {
      this.interval = setInterval(() => {
        this.active = (this.active + 1) % 5
      }, 3000)
    },
    goBack () {
      this.$router.replace({
        name: 'tutorialSecond'
      })
    },
    goNext () {
      this.$router.push({
        name: 'tutorialFourth'
      })
    },
    chose (index) {
      this.option = index
      this.showCover = true
      clearInterval(this.interval)
    }
  }
}
</script>

<style lang="scss" scoped>
.third {
  background-color: #fff;
  position: relative;
}
.carrousel {
  width: 100%;
  height: 700px;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(750px);
    transition: transform 1s;
    z-index: 0;
    &.in {
      transform: translate(0);
      z-index: 9;
    }
    &.out {
      transform: translate(-750px);
      z-index: 9;
    }
  }
  .dot {
    z-index: 19;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    li {
      list-style-type: none;
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #aaa;
      border-radius: 50%;
      &.active {
        background-color: #555;
      }
    }
  }
  .icon {
    position: absolute;
    z-index: 19;
    width: 44px;
    height: 44px;
    top: 15px;
    left: 20px;
    color: #fff;
    cursor: pointer;
  }
}
.title {
  font-size: 40px;
  text-align: center;
  margin-top: 70px;
  color: #333;
}
.options {
  li {
    list-style: none;
    width: 570px;
    height: 140px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
    cursor: pointer;
    font-size: 40px;
    color: #333;
    &.active {
      background-color: #1435ad;
      color: #fff;
    }
  }
}
.top-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 328px;
  height: 484px;
  z-index: 19;
  background-image: linear-gradient(#9ea3b9, #3d68be);
  .choose {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 268px;
    height: 268px;
    transform: translateY(10%);
    background-image: url('/static/images/choose.png');
    background-size: cover;
  }
  p {
    font-size: 32px;
    color: #5d331e;
  }
  span {
    display: block;
    text-align: center;
    margin-top: 70px;
    font-size: 72px;
    color: #fce520;
  }
}
.cover {
  z-index: 18;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.4;
}
</style>
